<template>
  <div v-if="from == 1" class="message-wrapper reverse">
    <img class="message-pp" src="../assets/pic1.png" alt="profile-pic" />
    <div class="message-box-wrapper">
      <div class="message-box">
        {{ message }}
      </div>
    </div>
  </div>
  <div v-if="from == 2" class="message-wrapper">
    <img class="message-pp" src="../assets/pic2.png" alt="profile-pic" />
    <div class="message-box-wrapper">
      <div v-if="message.length == 0" class="message-box">
        <el-skeleton style="width: 100px" animated :loading="loading"
          ><template #template>
            <div style="padding: 10px 0 0 0px">
              <el-skeleton-item variant="p" style="width: 100%" />
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-items: space-between;
                  margin-bottom: 8px;
                "
              >
                <el-skeleton-item variant="text" style="margin-right: 16px" />
                <el-skeleton-item variant="text" style="width: 30%" />
              </div></div></template
        ></el-skeleton>
      </div>
      <div v-else class="message-box">
        {{ message
        }}<span
          style="vertical-align: middle; cursor: pointer"
          title="点击聆听文本内容"
          @click="playAudio(message)"
          ><svg
            t="1678104113047"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2526"
            width="14.5"
            height="14.5"
            style="padding-left: 8px"
          >
            <path
              d="M460.8 128c-6.4-6.4-19.2-6.4-32 0L224 281.6h-192c-19.2 0-32 19.2-32 32V704c0 19.2 12.8 32 32 32h192L428.8 896c6.4 0 12.8 6.4 19.2 6.4 6.4 0 12.8 0 12.8-6.4 12.8-6.4 19.2-19.2 19.2-25.6V153.6c0-6.4-6.4-19.2-19.2-25.6z m-44.8 678.4L256 684.8c-6.4-6.4-12.8-6.4-19.2-6.4H64V345.6h172.8c6.4 0 12.8 0 19.2-6.4l160-121.6v588.8zM857.6 512c0-115.2-57.6-224-153.6-268.8-12.8-6.4-32 0-44.8 12.8-6.4 12.8 0 32 12.8 44.8 70.4 32 115.2 115.2 115.2 211.2 0 96-44.8 172.8-115.2 211.2-12.8 6.4-19.2 25.6-12.8 44.8 6.4 12.8 19.2 19.2 25.6 19.2 6.4 0 12.8 0 12.8-6.4 102.4-44.8 160-153.6 160-268.8z"
              p-id="2527"
              fill="#2894FF"
            ></path>
            <path
              d="M601.6 364.8c-12.8-6.4-32 0-44.8 12.8s0 32 12.8 44.8c32 12.8 51.2 51.2 51.2 89.6 0 38.4-19.2 76.8-51.2 89.6-12.8 6.4-19.2 25.6-12.8 44.8 6.4 12.8 19.2 19.2 25.6 19.2 6.4 0 12.8 0 12.8-6.4 57.6-25.6 89.6-83.2 89.6-147.2 0-64-32-121.6-83.2-147.2zM812.8 134.4c-12.8-6.4-32 0-44.8 12.8-6.4 12.8 0 32 12.8 44.8 108.8 51.2 179.2 179.2 179.2 320s-70.4 268.8-179.2 320c-12.8 6.4-19.2 25.6-12.8 44.8 6.4 12.8 19.2 19.2 25.6 19.2 6.4 0 12.8 0 12.8-6.4 128-64 211.2-211.2 211.2-377.6 6.4-166.4-76.8-313.6-204.8-377.6z"
              p-id="2528"
              fill="#2894FF"
            ></path>
          </svg>
        </span>
      </div>
      <audio ref="audio" class="aud" :src="audioSrc" @ended="end()"></audio>
    </div>
  </div>
</template>

<script>
export default {
  name: "ChatItem",
  props: {
    message: {
      type: String,
      required: true,
      default: "",
    },
    from: {
      type: Number,
      required: true,
      default: "",
    },
    timeStamp: {
      type: Date,
      required: true,
      default: "",
    },
    loading: {
      type: Boolean,
      required: true,
      default: false,
    },
  },
  data() {
    return {
      isplay: false,
      audioSrc: "",
    };
  },
  watch: {
    message: {
      handler(newVal, oldVal) {
        if (this.from == 2 && this.message != "") {
          this.playAudio(newVal);
        }
      },
      deep: true,
    },
  },
  methods: {
    end() {
      this.isplay = false;
      console.log("end");
    },
    playAudio(msg) {
      console.log("begin");
      if (this.isplay) {
        this.$refs.audio.pause();
        this.isplay = false;
        return;
      } else {
        if (this.audioSrc != "") {
          this.$refs.audio.play();
          this.isplay = true;
          return;
        } else {
          this.$axios({
            url: "  http://127.0.0.1:8000/api/speech",
            method: "get",
            params: { speech: msg, lang: "Ch" },
          }).then((res) => {
            console.log(res.data);
            this.audioSrc = res.data.src;
            console.log(this.audioSrc);
            setTimeout(() => {
              console.log(this.audioSrc);
              this.$refs.audio.play();
            }, 100);
          });
          this.isplay = true;
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.message-wrapper {
  display: flex;
  align-items: flex-start;
  padding-bottom: 20px;
}
.message-wrapper.reverse {
  justify-content: flex-end;
}
.message-wrapper.reverse .message-box {
  background-color: #1c2c4c;
  color: #fff;
}
.message-wrapper.reverse .message-box-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.message-wrapper.reverse .message-pp {
  order: 2;
}

.message-pp {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.message-box {
  background-color: #576c99;
  box-shadow: rgba(18, 23, 45, 0.6) 0px 8px 24px;
  border-radius: 4px;
  padding: 10px;
  font-size: 15px;
  line-height: 16px;
  width: 80%;
  max-width: 80%;
  color: #fff;
}
.message-box-wrapper {
  margin: 0 12px;
}
// .message-box-wrapper span {
//   font-size: 10px;
//   line-height: 16px;
//   color: rgba(255, 255, 255, 1);
//   opacity: 0.6;
// }
</style>
